<script lang="ts" setup>
import { reactive } from 'vue'
import CoverMark from '@/components/cover-mark/coverMark.vue'
import { getArtistAlbum } from '@/api/artist'
import type { HotAlbum, Artist1 } from '@/types/artist/index'
import { useFormat } from '@/hooks/useFormat'
import { useRouter } from 'vue-router'
const router = useRouter()

const { formatFullTimeStamp } = useFormat()

const props = defineProps<{
  id: number
}>()

const state = reactive({
  artist: {} as Artist1,
  page: 1,
  limit: 20,
  haveMore: false,
  hotAlbums: [] as HotAlbum[],
  isLoading: false,
})

const getAlbum = async () => {
  const params = {
    limit: state.limit,
    offset: (state.page - 1) * state.limit,
    id: props.id,
  }
  state.isLoading = true
  const { data } = await getArtistAlbum(params)
  state.isLoading = false
  if (data.code !== 200) return ElMessage.error('获取失败')
  const { artist, hotAlbums, more } = data
  state.artist = artist
  state.hotAlbums = hotAlbums
  state.haveMore = more
}
getAlbum()

const loadMore = () => {
  state.page++
  getAlbum()
}

const toAlbum = (id: number) => {
  router.push({
    name: 'album',
    query: {
      id,
    },
  })
}
</script>

<template>
  <div class="grid grid-cols-3 lg:grid-cols-5 2xl:grid-cols-8 gap-5 text-xs">
    <div v-for="item in state.hotAlbums" :key="item.id" @click="toAlbum(item.id)">
      <CoverMark :pic-url="item.picUrl" :show-count="false" />
      <div class="pt-2 truncate">{{ item.name }}</div>
      <div class="pt-2 text-slate-400">{{ formatFullTimeStamp(item.publishTime) }}</div>
    </div>
  </div>

  <div class="text-center" v-if="state.haveMore">
    <el-button class="mx-auto" type="success" link @click="loadMore" v-loading="state.isLoading"> 加载更多 </el-button>
  </div>
</template>

<style lang="less" scoped></style>
